<template>
  <div class="games-join">
    <div class="headline" v-if="gameList.length > 0">
      <span></span>我参加的比赛
    </div>

    <a class="game" href="javascript:;" v-for="item in gameList" @click.stop.prevent="gameDetail(item)">
      <div class="official-game-icon" v-if='item.GAME_TYPE == "NETDS" || item.GAME_TYPE == ""'>排名赛</div>
      <div class="team-game-icon" v-else-if='item.GAME_TYPE == "TDS"'>团队赛</div>
      <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "CLS"'>超级赛</div>
      <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "JYS"'>精英赛</div>
      <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "QGS"'>全国赛</div>
      <div class="official-game-icon" v-else-if='item.GAME_KIND == "1"'>官方</div>
      <div class="text-center">
        <img src="~assets/images/shuyezuo@3x.png">
        <div class="games-block-content">
          <div class="game-name">{{item.UP_GAME_NAME || item.GAME_NAME}}</div>
          <div class="date">
            <span>{{item.BEGIN_DATE | formatDatePoint}} - {{item.END_DATE | formatDatePoint}}</span>
            <b>
              <i class="arrow-right1"></i><i class="arrow-right2"></i>
            </b>
          </div>
        </div>
        <img src="~assets/images/shuyeyou@3x.png">
      </div>

      <div class="game-row">
        <div class="game-row-item ratio">
          <div class="key">收益率</div>
          <div class="value" :class="item.totalProfit<0 ? 'negative' : 'positive'">
            {{item.totalProfit}}%
          </div>
        </div>

        <div class="game-row-item head-count">
          <div class="key">参加人数</div>
          <div class="value">{{item.GAME_ATTEND_PERSON}}<span class="color-gray" v-if="item.JOIN_BEGIN_DATE && item.JOIN_BEGIN_DATE!=0">/{{item.GAME_MAX_LIMIT}}</span></div>
        </div>

        <div class="game-row-item" v-if="item.GAME_TYPE == 'TDS' && item.GAME_STEP > 2">
          <div class="key">我的团队</div>
          <div class="value">{{item.GAME_NAME}}</div>
        </div>

        <div class="game-row-item rank">
          <div class="key" v-if="!isNaN(item.rankNum)">我的排名</div>
          <div class="value" v-if="!isNaN(item.ranknum)">
            {{item.rankNum <= 0?'--':item.rankNum}}
          </div>
          <div class="key" v-else>
            {{item.rankNum}}
          </div>
        </div>
      </div>
      <div class='forward'>
        <i class='iconfont icon-xiangyou'></i>
      </div>
    </a>
    <div class="placeholder" v-if="gameList.length == 0">
      <div class="content">
        <div class="tips" v-if="error == ''">
          哎呦，我还没有
          <a href="javascripy:;" class="color-blue" @click.stop.prevent="joinGame">参加比赛</a>
          哦
        </div>
        <div class="tips" v-else>
          {{error}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import LocalDAO from 'common/localDAO'
  import formatDatePoint from 'filters/formatDatePoint'
  import {openGame} from 'components/game/openGame'
  export default {
    filters: { formatDatePoint },
    data () {
      return {
        gameList: [],
        error: ''
      }
    },
    mounted: function () {
      var gamesJoin = LocalDAO.getGamesJoin() || {list: []}
      this.gameList = gamesJoin.list
      this.fetchData()
    },
    methods: {
      fetchData () {
        let userCode = LocalDAO.getUserCode()
        // 查询我参加的比赛
        RemoteDAO.callHB002(userCode, "1", "500", "1", "0", response => {
          if(Number(response.error) === 0){
            for(let i = 0; i < response.data.body.length; i++) {
              let item = response.data.body[i]
              item.totalProfit = CommonUtil.toFixed(item.total_floatprofit, 2)
              if(item.totalProfit > 0) item.totalProfit = '+' + item.totalProfit;
              //DELETE为1，比赛直接无效
              if (item.DELETE == "1" || item.GAME_STATUS !="1") {
                item.GAME_STEP = "5";
              }
              // 未开始比赛，报名中，报名结束排名显示“未开赛”
              if (item.GAME_STEP == "0") {
                item.rankNum = "未开赛";
              } else if (item.GAME_STEP == "1") {
                item.rankNum = "报名中";
              } else if (item.GAME_STEP == "2") {
                item.rankNum = "报名结束";
              } else if (item.GAME_STEP == "5") {
                item.rankNum = "比赛失效";
              } else {
                item.rankNum = item.ranknum;
              }

              // let object = {};
              // object.gameId = item.GAME_ID;
              // object.gameName = item.GAME_NAME;
              // object.beginDate = CommonUtil.formatDatePoint(item.BEGIN_DATE);
              // object.endDate = CommonUtil.formatDatePoint(item.END_DATE);
              // object.gameAttendPerson = item.GAME_ATTEND_PERSON;
              // object.gameMaxLimit = item.GAME_MAX_LIMIT;
              // object.totalProfit = CommonUtil.toFixed(item.total_floatprofit, 2);
              // object.gameType = item.GAME_TYPE;
              // object.gameKind = item.GAME_KIND;
              // if(object.totalProfit>=0){
              //   object.totalProfit = "+" + object.totalProfit;
              // }

              //DELETE为1，比赛直接无效
              // if (item.DELETE == "1" || item.GAME_STATUS !="1") {
              //   item.GAME_STEP = "5";
              // }
              // 未开始比赛，报名中，报名结束排名显示“未开赛”
              // if (item.GAME_STEP == "0") {
              //   object.ranknum = "未开放报名";
              // } else if (item.GAME_STEP == "1") {
              //   object.ranknum = "报名中";
              // } else if (item.GAME_STEP == "2") {
              //   object.ranknum = "报名结束";
              // } else if (item.GAME_STEP == "5") {
              //   object.ranknum = "比赛失效";
              // } else {
              //   object.ranknum = item.ranknum;
              // }
              // list.push(object);
            }
            response.data.body.sort((a, b) => {
              return a.END_DATE > b.END_DATE ? -1 : 1
            })
            this.gameList = response.data.body
            this.error = '';
            LocalDAO.setGamesJoin({list: this.gameList});
          }else{
            this.error = response.data
          }
        });
      },
      joinGame(){
        this.$router.push('/game')
      },
      gameDetail (item){
        // this.$router.push({path: '/game/gamedetail', query: {gameId: item.gameId}});
        if (item.GAME_TYPE === 'TDS') {
          this.$router.push({ path: '/team-game/game-detail', query: { gameId: item.UP_GAME_ID, gameName: item.UP_GAME_NAME }});
        } else {
          openGame(item, this)
        }
      }
    }
  }
</script>

<style scoped>
  .game-row{
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
  .game-row-item{
    text-align: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }
  .game-row-item >div {
    text-align: center;
    white-space: nowrap;
    padding: 0 2px;
    width: 100%;
  }
  .value{
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
